import { ExtractPropTypes } from 'vue'
import { ZIndex } from '../../config'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * modal内容配置类型
 */
export type ModalDataButton = {
  /** 按钮内容 */
  text?: string,
  /** 背景颜色 */
  bgColor?: string,
  /** 字体颜色 */
  color?: string
}
export type ModalDataType = {
  /** 标题 */
  title?: string,
  /** 内容 */
  content?: string,
  /** 确认按钮 */
  confirm?: ModalDataButton,
  /** 取消按钮 */
  cancel?: ModalDataButton
}

/**
 * props参数
 */
export const modalProps = {
  /** modelValue */
  modelValue: {
    type: Boolean,
    default: false
  },
  /** 数据配置 */
  data: {
    type: Object,
    default: (): ModalDataType => {
      return {
        title: '',
        content: '',
        confirm: { text: '确认' },
        cancel: { text: '取消' }
      }
    }
  },
  /** 显示确认按钮 */
  showConfirm: {
    type: Boolean,
    default: true
  },
  /** 显示取消按钮 */
  showCancel: {
    type: Boolean,
    default: false
  },
  /** 显示遮罩 */
  mask: {
    type: Boolean,
    default: true
  },
  /** 点击遮罩可以关闭 */
  maskCloseable: {
    type: Boolean,
    default: true
  },
  /** zIndex */
  zIndex: {
    type: [String, Number],
    default: ZIndex.modal
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type ModalProps = ExtractPropTypes<typeof modalProps>

export const modalEmits = {
  [UPDATE_MODEL_EVENT]: (value: boolean) => typeof value === 'boolean',
  /** 确认事件 */
  confirm: () => true,
  /** 取消事件 */
  cancel: () => true,
  /** 关闭事件 */
  close: () => true
}
export type ModalEmits = typeof modalEmits
